<template>
  <div>
    <van-nav-bar fixed title="修改密码" left-arrow @click-left="back" />
    <div class="has-top ">

      <van-cell-group class="mtb-20 mlr-25 br-8 ofh">
        <van-field label="手机号" :value="model.Tel" readonly />
        <van-field
          v-model="requsetParams.validCode"
          center
          clearable
          label="验证码"
          placeholder="请输入验证码"
        >
          <template #button>
            <div v-show="seconds<=0" class="hollow-btn br-6" @click="getSms">获取验证码</div>
            <div v-show="seconds>0" class="hollow-btn-current br-6">重新发送({{ seconds }}s)</div>
          </template>
        </van-field>
        <van-field v-model="requsetParams.pwd" type="text" label="设置密码" placeholder="请输入新密码" />

      </van-cell-group>
      <div class="mt-70 mlr-25">
        <p class="btn-large solid-btn " @click="save">保存</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ReSetPwd, SendSmsNoVerifyCode } from 'api/member'
export default {
  name: 'ChangePassword',
  components: { },
  props: {
    model: { // 数据
      type: Object,
      required: true,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      seconds: 0,
      requsetParams: {
        validType: 8
      }
    }
  },
  computed: {},
  created() {
  },

  methods: {
    back() {
      this.$emit('back')
    },
    getSms() {
      const params = {
        tel: this.model.Tel,
        validType: 8
      }
      this.SendSmsNoVerifyCode(params)
    },
    save() {
      if (!this.requsetParams.validCode || this.requsetParams.validCode === '') {
        this.$toast.fail('请输入验证码')
        return
      } else if (!this.requsetParams.pwd || this.requsetParams.pwd === '') {
        this.$toast.fail('请输入新密码')
        return
      }
      this.requsetParams.tel = this.model.Tel
      this.requsetParams.validType = 8
      this.ReSetPwd(this.requsetParams)
    },
    // 获取验证码
    SendSmsNoVerifyCode(params) {
      SendSmsNoVerifyCode(params).then(res => {
        if (res) {
          debugger
          const _this = this
          _this.seconds = 30
          const intval = setInterval(() => {
            if (_this.seconds === 0) {
              clearInterval(intval)
              return
            }
            _this.seconds--
          }, 1000)
        }
      })
    },
    // 修改密码
    ReSetPwd(params) {
      ReSetPwd(params).then(res => {
        if (res) {
          this.requsetParams = {}
          this.$toast.success('修改成功')
          this.$emit('save')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.van-tabs__nav {
  background: $colorF5;
  .van-tab {
    font-size: 16px;
    font-weight: bold;
  }
}
/deep/.van-tabs__nav_Fixed {
  background: $colorF;
}
/deep/.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
  border: none;
}
/deep/.van-field__label{
  width:1.1rem;
}
.van-cell{
  align-items: center;
  font-size: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.img-box{
  width: 128px;
  height: 32px;
  display: inline-block;
}
.solid-btn{
  border-radius: 10px;
}
</style>
